<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/system" replace>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">权限</div>
      <div class="searchBox">
        <el-form size="mini" inline>
          <div class="block">
            <el-form-item>
              <el-button type="primary" icon="el-icon-circle-plus" @click="addPower">添加</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-table :data="tableData">
        <el-table-column prop="" label="编号" align="center"></el-table-column>
        <el-table-column prop="" label="目录级别" align="center"></el-table-column>
        <el-table-column prop="" label="目录名称" align="center"></el-table-column>
        <el-table-column prop="" label="地址" align="center"></el-table-column>
        <el-table-column prop="" label="名称" align="center"></el-table-column>
        <el-table-column prop="" label="目标" align="center"></el-table-column>
        <el-table-column prop="" label="图标" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="data">
            <el-button type="primary" size="mini" @click="deletes(data.row)">删除</el-button>
            /
            <el-button type="primary" size="mini" @click="adit(data.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :maxTotal="maxTotal" @handleSize="handleSizeChange" @handleCurrent="handleCurrentChange"></pagination>
      <div class="addPower" v-if="showAddPower">
        <el-form size="mini" :model="powerObject" label-width="100px">
          <el-form-item label="目录级别">
            <el-input v-model="powerObject.mobile"></el-input>
          </el-form-item>
          <el-form-item label="目录名称">
            <el-input v-model="powerObject.name"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="powerObject.email"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="powerObject.email"></el-input>
          </el-form-item>
          <el-form-item label="目标">
            <el-input v-model="powerObject.email"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="powerObject.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import pagination from 'components/pagination'

  export default {
    data () {
      return {
        maxTotal: 10,
        tableData: [],
        powerObject: {},
        showAddPower: false
      }
    },
    created () {
    },
    methods: {
      onSubmit () {
      },
      handleSizeChange (val) {
      },
      handleCurrentChange (val) {
      },
      deletes (item) {
      },
      addPower () {
        this.powerObject = {}
        this.showAddPower = !this.showAddPower
      },
      adit (item) {
        this.powerObject = item
        this.showAddPower = true
      }
    },
    components: {
      pagination
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .el-button{
    margin-left: 0;
  }
  .addPower {
    padding: 20px 20px 0;

    .el-form {
      .el-form-item {
        .el-input {
          width: 20%;
        }
      }
    }
  }
</style>
